<script lang="ts" setup>
import { ref } from 'vue'
import axios from 'axios'
import { useRoute } from 'vue-router'
import router from '../../router/router'
const route = useRoute()

const activeName = ref('first')
const changeNumber = ref(null)// 选择题出题数量
const fillNumber = ref(null)// 填空题出题数量
const judgeNumber = ref(null)// 判断题出题数量
const options = [{ value: '选择题', label: '选择题' }, { value: '填空题', label: '填空题' }, { value: '判断题', label: '判断题' }]
const difficulty = [{ value: '简单', label: '简单' }, { value: '一般', label: '一般' }, { value: '困难', label: '困难' }]
const difficultyValue = '简单'
const levels = ref([{ value: '1', label: '1' }, { value: '2', label: '2' }, { value: '3', label: '3' }, { value: '4', label: '4' }, { value: '5', label: '5' }])
const rights = ref([{ value: 'A', label: 'A' }, { value: 'B', label: 'B' }, { value: 'C', label: 'C' }, { value: 'D', label: 'D' }])
const postChange = ref({ // 选择题提交内容
  subject: ref(), // 试卷名称
  level: ref(), // 难度等级选中值
  rightAnswer: ref(), // 正确答案选中值
  section: ref(), // 对应章节
  question: ref(), // 题目
  analysis: ref(), // 解析
  answerA: ref(),
  answerB: ref(),
  answerC: ref(),
  answerD: ref()
})
const postFill = ref({ // 填空题提交内容
  subject: ref(), // 试卷名称
  level: ref(), // 难度等级选中值
  answer: ref(), // 正确答案
  section: ref(), // 对应章节
  question: ref(), // 题目
  analysis: ref() // 解析
})
const postJudger = ref({ // 判断题提交内容
  subject: ref(), // 试卷名称
  level: ref(), // 难度等级选中值
  answer: ref(), // 正确答案
  section: ref(), // 对应章节
  question: ref(), // 题目
  analysis: ref() // 解析
})
const postPaper = ref({ // 考试管理表对应字段
  paperId: ref(),
  questionType: ref(), // 试卷类型 1--选择题  2--填空题   3--判断题
  questionId: ref()
})
const subject = route.query.subject
// eslint-disable-next-line no-unused-vars
const paperId = route.query.paperId
const value = ref('')

const create = () => {
  console.log(fillNumber.value)
  axios.post('api/item', {
    changeNumber: changeNumber.value,
    fillNumber: fillNumber.value,
    judgeNumber: judgeNumber.value,
    paperId: paperId,
    subject: '计算机科学与大数据'
  }).then(res => {
    router.push('/selectAnswer')
  })
}

// 推出选择题
const changeSubmit = () => {
  postChange.value.subject = subject
  axios.post('api/multiquestioncontroller/MultiQuestion', {
    subject: postChange.value.subject,
    level: postChange.value.level, // 难度等级选中值
    rightAnswer: postChange.value.rightAnswer, // 正确答案选中值
    section: postChange.value.section, // 对应章节
    question: postChange.value.question, // 题目
    analysis: postChange.value.analysis, // 解析
    answerA: postChange.value.answerA,
    answerB: postChange.value.answerB,
    answerC: postChange.value.answerD,
    answerD: postChange.value.answerD
  }).then(res => {
    // postChange.value = {}
  }).then(() => {
    axios.get('api/multiquestioncontroller/multiQuestionId').then(res => {
      const questionId1 = res.data
      postPaper.value.questionId = questionId1
      postPaper.value.questionType = 1
      axios.post('api/papercontroller/paperManage', {
        paperId: paperId,
        questionType: postPaper.value.questionType, // 试卷类型 1--选择题  2--填空题   3--判断题
        questionId: postPaper.value.questionId
      }).then(res => {
        console.log(paperId)
        console.log(postPaper.value.questionType)
        console.log(postPaper.value.questionId)
      })
    })
  })
}

// 推出填空题
const fillSubmit = () => {
  postFill.value.subject = subject
  axios.post('api/fillquestionserviceimpl/fillQuestion', {
    subject: postFill.value.subject, // 试卷名称
    level: postFill.value.level, // 难度等级选中值
    answer: postFill.value.answer, // 正确答案
    section: postFill.value.section, // 对应章节
    question: postFill.value.question, // 题目
    analysis: postFill.value.analysis // 解析
  }).then(res => {
    // postFill.value = {}

  }).then(() => {
    axios.get('api/fillquestionserviceimpl/fillQuestionId').then(res => {
      console.log(paperId)
      const questionId2 = res.data.questionId
      postPaper.value.questionId = questionId2
      postPaper.value.questionType = 2
      axios.post('api/papercontroller/paperManage', {
        paperId: paperId,
        questionType: postPaper.value.questionType, // 试卷类型 1--选择题  2--填空题   3--判断题
        questionId: postPaper.value.questionId
      })
    })
  })
}
const judgeSubmit = () => { // 判断题提交S
  postJudger.value.subject = subject
  axios.post('/api/judgequestioncontroller/judgeQuestion', {
    subject: postJudger.value.subject, // 试卷名称
    level: postJudger.value.level, // 难度等级选中值
    answer: postJudger.value.answer, // 正确答案
    section: postJudger.value.section, // 对应章节
    question: postJudger.value.question, // 题目
    analysis: postJudger.value.analysis // 解析
  }).then(res => {
    // postJudger.value = {}
  }).then(() => {
    axios('/api/judgequestioncontroller/judgeQuestionId').then(res => { // 获取当前题目的questionId
      const questionId3 = res.data.questionId
      postPaper.value.questionId = questionId3
      postPaper.value.questionType = 3
      axios.post('api/papercontroller/paperManage', {
        paperId: paperId,
        questionType: postPaper.value.questionType, // 试卷类型 1--选择题  2--填空题   3--判断题
        questionId: postPaper.value.questionId
      })
    })
  })
}

</script>

<template>
<div class="add">
<el-tabs v-model="activeName">
    <el-tab-pane label="添加试题" name="first" >
      <!-- <span slot="label"><i class="el-icon-circle-plus">添加试题</i></span> -->
      <section class="append">
        <ul>
          <li>
            <span>题目类型:</span>
            <el-select v-model="value" placeholder="请选择题型" class="w150">
              <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
              </el-option>
            </el-select>
          </li>
          <li v-if="value==='选择题'">
          <span>所属章节:</span>
          <el-input
          placeholder="请输入对应章节"
          v-model="postChange.section"
          class="w150"
          clearable>
          </el-input>
          </li>
          <li v-if="value=== '填空题'">
          <span>所属章节:</span>
          <el-input
          placeholder="请输入对应章节"
          v-model="postFill.section"
          class="w150"
          clearable
          ></el-input>
          </li>
          <li v-if="value === '判断题'">
          <span>所属章节：</span>
          <el-input
          placeholder="请输入对应章节"
          v-model="postJudger.section"
          class="w150"
          clearable>
            </el-input>
          </li>
          <li v-if="value === '选择题'">
            <span>难度等级:</span>
            <el-select v-model="postChange.level" placeholder="选择难度等级" class="w150">
              <el-option
                v-for="item in levels"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </li>
          <li v-if="value === '填空题'">
            <span>难度等级:</span>
            <el-select v-model="postFill.level" placeholder="选择难度等级" class="w150">
              <el-option
                v-for="item in levels"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </li>
          <li v-if="value === '判断题'">
            <span>难度等级:</span>
            <el-select v-model="postJudger.level" placeholder="选择难度等级" class="w150">
              <el-option
                v-for="item in levels"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </li>
          <li v-if="value === '选择题'">
            <span>正确选项:</span>
            <el-select v-model="postChange.rightAnswer" placeholder="选择正确答案" class="w150">
              <el-option
                v-for="item in rights"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </li>
        </ul>
        <!-- 选择题部分 -->
        <div class="change" v-if="value ==='选择题'">
          <div class="title">
            <el-tag>题目:</el-tag><span>在下面的输入框中输入题目,形如--DNS 服务器和DHCP服务器的作用是()</span>
            <el-input
              type="texttarea"
              rows="4"
              v-model="postChange.question"
              placeholder="请输入题目内容"
              resize="none"
              class="answer"
            ></el-input>
          </div>
          <div class="option">
            <ul>
              <li>
                <el-tag type="success">A</el-tag>
                <el-input
                 placeholder="请输入选项A的内容"
                  v-model="postChange.answerA"
                  clearable=""
                ></el-input>
              </li>
              <li>
                <el-tag type="success">B</el-tag>
                <el-input
                  placeholder="请输入选项B的内容"
                  v-model="postChange.answerB"
                  clearable="">
                </el-input>
              </li>
              <li>
                <el-tag type="success">C</el-tag>
                <el-input
                  placeholder="请输入选项C的内容"
                  v-model="postChange.answerC"
                  clearable="">
                </el-input>
              </li>
              <li>
                <el-tag type="success">D</el-tag>
                <el-input
                  placeholder="请输入选项D的内容"
                  v-model="postChange.answerD"
                  clearable="">
                </el-input>
              </li>
            </ul>
          </div>
          <div class="title">
            <el-tag>解析:</el-tag><span>在下面的输入框中输入题目解析</span>
            <el-input
             type="textarea"
              rows="4"
              v-model="postChange.analysis"
              placeholder="请输入答案解析"
              resize="none"
              class="answer"
            ></el-input>
          </div>
          <div class="submit">
            <el-button type="primary" @click="changeSubmit()">立即添加</el-button>
          </div>
        </div>

        <!-- 填空题部分 -->
        <div class="change fill" v-if="value==='填空题'">
          <div class="title">
            <el-tag>题目:</el-tag><span>输入题目,形如--从计算机网络系统组成的角度看,计算机网络系统可以分为()和()。注意需要考生大题部分一定要用（英文半角）括起来。</span>
            <el-input
            type="textarea"
              rows="4"
              v-model="postFill.question"
              placeholder="请输入题目内容"
              resize="none"
              class="answer">
              </el-input>
          </div>
          <div class="fillAnswer">
            <el-tag>正确答案:</el-tag>
            <el-input v-model="postFill.answer"></el-input>
          </div>
          <div class="title analysis">
            <el-tag type="success">解析:</el-tag><span>下方输入框输入答案解析</span>
            <el-input
             type="textarea"
              rows="4"
              v-model="postFill.analysis"
              placeholder="请输入答案解析"
              resize="none"
              class="answer"
            ></el-input>
          </div>
          <div class="submit">
            <el-button type="primary" @click="fillSubmit()">立即添加</el-button>
          </div>
        </div>

        <!-- 判断题 -->
        <div class="change judge" v-if="value==='判断题'">
          <div class="title">
            <el-tag>题目:</el-tag><span>在下面的输入框中输入题目</span>
            <el-input
             type="textarea"
              rows="4"
              v-model="postJudger.question"
              placeholder="请输入题目内容"
              resize="none"
              class="answer">
            </el-input>
          </div>
          <div class="judgeAnswer">
            <el-radio v-model="postJudger.answer" label="T">正确</el-radio>
            <el-radio v-model="postJudger.answer" label="F">错误</el-radio>
          </div>
          <div class="title">
            <el-tag>解析:</el-tag><span>在下面的输入框中输入题目解析</span>
            <el-input
            type="textarea"
              rows="4"
              v-model="postJudger.analysis"
              placeholder="请输入答案解析"
              resize="none"
              class="answer"
            ></el-input>
          </div>
          <div class="submit">
            <el-button type="primary" @click="judgeSubmit()">立即添加</el-button>
          </div>
        </div>
      </section>
    </el-tab-pane>
    <el-tab-pane name="second" label="在线组卷">
<!-- <span slot="label"
      ><i class="iconfont icon-daoru-tianchong"></i>在线组卷</span> -->
      <div class="box">
        <ul>
          <li>
            <span>试卷难度:</span>
            <el-select v-model="difficultyValue" placeholder="试卷难度" class="w150">
              <el-option
               v-for="item in difficulty"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </li>
          <li>
            <span>选择题数量:</span><el-input type="text" v-model="changeNumber"></el-input>
          </li>
          <li>
            <span>填空题数量:</span><el-input type="text" v-model="fillNumber"></el-input>
          </li>
          <li>
            <span>判断题数量:</span><el-input type="text" v-model="judgeNumber"></el-input>
          </li>
          <li>
            <el-button type="primary" @click="create()">立即组卷</el-button>
          </li>
        </ul>
      </div>
      </el-tab-pane>
  </el-tabs>
</div>

</template>

<style lang="less" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.add {
  margin: 0px 40px;
  .box {
    padding: 0px 20px;
    ul li {
      margin: 10px 0px;
      display: flex;
      align-items: center;
      .el-input {
        width: 6%;
      }
      .w150 {
        margin-left: 20px;
        width: 7%;
      }
    }
  }
  .el-icon-circle-plus {
    margin-right: 10px;
  }
  .icon-daoru-tianchong {
    margin-right: 10px;
  }
  .append {
    margin: 0px 20px;
    ul {
      display: flex;
      align-items: center;
      li {
        margin-right: 20px;
      }
    }
    .change {
      margin-top: 20px;
      padding: 20px 16px;
      background-color: #E7F6F6;
      border-radius: 4px;
      .title {
        padding-left: 6px;
        color: #2f4f4f;
        span:nth-child(1) {
          margin-right: 6px;
        }
        .answer {
          margin: 20px 0px 20px 8px;
        }
        .el-textarea {
          width: 98% !important;
        }
      }
      .option {
        ul {
          display: flex;
          flex-direction: column;
        }
        ul li {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 98%;
          margin: 10px 0px;
          span {
            margin-right: 20px;
          }
        }
      }
      .submit {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .fill {
      .fillAnswer {
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          margin-right: 6px;
        }
        .el-input {
          width: 91% !important;
        }
      }
      .analysis {
        margin-top: 20px;
        margin-left: 5px;
      }
    }
    .judge {
      .judgeAnswer {
        margin-left: 20px;
        margin-bottom: 20px;
      }
    }
    .w150 {
      width: 150px;
    }
    li:nth-child(2) {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
